<template>
  <div id="app">
    <transition :name="transitionName" >
        <router-view class="router"/>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      transitionName: 'fade'
    }
  },
  beforeUpdate() {
      let direction = this.$router.direction
      switch (direction) {
        case 'left':
            this.transitionName = 'slide-left'
            break
        case 'right':
            this.transitionName = 'slide-right'
            break
        default:
            this.transitionName = 'fade'
      }
      this.$router.direction = ''
  },
}
</script>

<style>
@import url(./assets/style/normalize.css);
@import url(./assets/style/common.css);
</style>

<style lang="less" scoped>
#app{
   width: 100%;
   min-height: 100%;
}
</style>

<style lang="less">
.van-radio-group {
      .van-radio {
          margin-bottom: 25px;
          .van-radio__icon {
              width: 32px;
              height: 32px;
              line-height: 32px;
              .van-icon {
                  width: 32px;
                  height: 32px;
                  line-height: 32px;
                  font-size: 24px;
              }
          }
          .van-radio__icon--checked {
              .van-icon {
                  border-color: #6c52fb;
                  background-color: #6c52fb;
              }
          }
          .van-radio__label {
              width: 90%;
              font-size: 30px;
              color: #333333;
          }
          &.radio-item {
            .van-radio__label {
                color: #666666;
            }
          }
      }
  }
  .van-overlay {
    background-color: rgba(0,0,0,.3);
    &.van-image-preview__overlay {
       background-color: rgba(0,0,0,.9);
    }
  }
  .close-btn {
      position: absolute;
      vertical-align: middle;
      font-size: 38px;
      color: #bbbbbb;
      right: 30px;
  }
</style>





